<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 09:37:17
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-26 13:45:10
 * @Description: 
-->
<template>
  <div v-if="!isNotFound" class="center-box">
    <div class="left">
      <el-page-header @back="router.go(-1)" icon="ArrowLeft">
        <template #content>
          <span class="text-large font-600 mr-3"> 个人中心 </span>
        </template>
      </el-page-header>
      <el-card shadow="hover">
        <div class="user-card">
          <el-avatar :size="100">{{ user.nickname }}</el-avatar>
          <div class="text">
            <div class="nickname">{{ user.nickname }}</div>
          </div>
          <el-button type="primary" @click="handleEdit">编辑个人资料</el-button>
        </div>
      </el-card>

      <el-card shadow="hover">
        <template #header>
          <el-button link type="primary">文章</el-button>
          <el-divider direction="vertical" />
          <el-button link>收藏</el-button>
          <el-divider direction="vertical" />
          <el-button link>评论</el-button>
        </template>
      </el-card>
    </div>
  </div>

  <NotFound v-else />
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import NotFound from "@/components/error/404error.vue";
const route = useRoute();
const router = useRouter();
const store = useStore();

const queryId = route.params.id;
console.log(queryId);
const user = computed(() => store.state.User.user);
console.log(sessionStorage.id);

const isNotFound = queryId != sessionStorage.id;
console.log(isNotFound);
//  console.log(user);

const handleEdit = ()=>{
    router.push({name:"UserSettings"})
}
</script>

<style lang='less' scoped>
// .center-box {
//   display: block;
// }
.left {
  width: 80%;
  position: relative;
  .el-card {
    margin-top: 20px;
  }
  .user-card {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    .text {
      flex: 1;
      padding-left: 20px;
      .nickname {
        font-size: 1.6rem;
      }
    }
  }
}
</style>
